<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="Form" :inline="true" label-width="90px">
      <el-form-item label="日期：" prop="dateTtime">
        <el-date-picker v-model="dateTtime" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" @change="changeTime">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
          style="margin-left: 10px">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="echartBox">
      <div ref="myChartdom1" class="chartdom1"></div>
      <div ref="myChartdom2" class="chartdom2"></div>
      <div ref="myChartdom3" class="chartdom3"></div>
    </div>
    <!-- 单个幼儿午睡情况 -->
    <el-dialog title="幼儿午睡信息" :visible.sync="childOpen" width="850px" append-to-body>
      <!-- <el-form :model="childParams" ref="queryForm" :inline="true" label-width="88px">
        <el-form-item label="幼儿名称" prop="schoolName">
          <el-input v-model="childParams.schoolName" placeholder="请输入幼儿名称" clearable size="small" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="childQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="childReset">重置</el-button>
        </el-form-item>
      </el-form> -->
      <el-table v-loading="loading" :data="studentsInfo">
        <el-table-column align="center" label="幼儿姓名" prop="name"></el-table-column>
        <el-table-column align="center" label="性别" prop="sex">
          <template slot-scope="scoped">
            <div>
              <span>{{ scoped.row.sex == 1 ?  '女' : '男' }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="睡眠评分" prop="attendance0"></el-table-column>
        <el-table-column align="center" label="午睡时长" prop="value"></el-table-column>
        <el-table-column align="center" label="开始时间" prop="startTime"></el-table-column>
        <el-table-column align="center" label="结束时间" prop="endTime"></el-table-column>
        <!-- <el-table-column  align="center" label="入园率"  prop="ryl"></el-table-column> -->
      </el-table>
      <!-- <pagination v-show="childtotal > 0" :total="childtotal" :page.sync="childParams.pageNum"
        :limit.sync="childParams.pageSize" @pagination="getchildList" /> -->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="childOk">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import moment from "moment";
import {
  schoolSleep,
  schoolSleepScore,
  classSleepScore,
  classAvg,
  sleepSeeThree
} from "@/api/qu/qyyerygk";
import { formatDateOnly } from "@/utils";
export default {
  name: "qywsgk",
  data() {
    return {
      dateTtime: "",
      queryParams: {},
      myCharts1: null,
      myCharts2: null,
      myCharts3: null,
      siestaPeople: [
        { name: "园所1", value: 200 },
        { name: "园所2", value: 300 },
        { name: "园所3", value: 400 },
        { name: "园所4", value: 500 },
      ],
      scoreList: [
        { name: "0星", value: 20 },
        { name: "1星", value: 20 },
        { name: "2星", value: 20 },
        { name: "3星", value: 20 },
        { name: "4星", value: 20 },
        { name: "5星", value: 20 },
      ],
      siestaList: [],
      childOpen: false,
      childParams: {
        name: "",
        pageNum: 1,
        pageSize: 10,
      },
      loading: false,
      childList: [],
      childtotal: 0,
      schoolSleepObj: [],
      paramsObj:{},
      studentsInfo:[]
    };
  },
  created() {
    const time = new Date().getTime() - 86400000 * 1;
    const dateDay = formatDateOnly(time);
    this.dateTtime = dateDay;
  },
  mounted() {
    this.schoolSleep();
    this.myCharts1 = this.$echarts.init(this.$refs.myChartdom1);
    this.myCharts2 = this.$echarts.init(this.$refs.myChartdom2);
    this.myCharts3 = this.$echarts.init(this.$refs.myChartdom3);
    this.myChartsFn2();
    this.myChartsFn3();
    window.addEventListener("resize", this.monitorResize);
  },
  methods: {
    // 序号
    customeIndex(index) {
      return (
        index + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
      );
    },
    getchildList() { },
    childQuery() { },
    childReset() {
      this.childParams = {
        name: "",
        pageNum: 1,
        pageSize: 10,
      };
    },
    childOk() {
      this.childOpen = false;
    },
    handleQuery() { },
    resetQuery() { },
    changeTime() { },
    myChartsFn1() {
      const option = {
        title: {
          text: "园所午睡人数",
          left: "left",
        },
        // dataZoom: {
        //   bottom: 0,
        //   show: 12 / this.siestaPeople.length < 1,
        //   type: 'slider',
        //   zoomLock: true,
        //   brushSelect: false,
        //   height: 8,
        //   handleSize: '0',
        //   sow: true,
        //   xAxisIndex: [0],
        //   start: 0,
        //   end: 12 / this.siestaPeople.length * 100
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          selectedMode: "single",
          top: 0,
          left: "20%",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            axisLabel: {
              //x轴文字的配置
              show: true,
              rotate: 30,
              interval: 0, //使x轴文字显示全
            },
            data: this.schoolSleepObj.map((item) => {
              return item.schoolName;
            }),
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        color: ["#2f89cf", "#27d08a"],
        series: [
          {
            type: "bar",
            emphasis: {
              focus: "series",
            },
            barWidth: "60",
            label: {
              show: true,
              position: "inside",
              fontSize: 15,
            },
            data: this.schoolSleepObj.map((item) => {
              return item.total;
            }),
          },
        ],
      };
      this.myCharts1.off("click");
      this.myCharts1.on("click", (e) => {
        if (e.componentType === "series") {
          if (e.name.includes("幼儿园")) {
            let code = "";
            this.schoolSleepObj.forEach((item) => {
              if (item.schoolName == e.name) {
                code = item.schoolCode;
              }
            });
            this.paramsObj = {
              sleepDate: this.dateTtime,
              schoolCode: code,
            };
            this.schoolSleepScore(this.paramsObj);
            this.classAvg(this.paramsObj);
          }
        }
      });
      // 使用刚指定的配置项和数据显示图表
      this.myCharts1.setOption(option, true);
      window.addEventListener("resize", this.monitorResize);
    },
    myChartsFn2() {
      const option = {
        title: {
          text: "睡眠评分人数分布",
          //  subtext: '纯属虚构',
          left: "left",
        },
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            // console.log(params);
            return params.name + ":" + params.value + "人";
          },
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          right: "20%",
          top: 20,
          bottom: 20,
        },
        grid: {
          left: "1%",
          right: "4%",
          bottom: "1%",
          containLabel: true,
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "75%",
            center: ["40%", "50%"],
            data: this.scoreList,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      this.myCharts2.setOption(option);
      window.addEventListener("resize", this.monitorResize);
    },
    myChartsFn3() {
      const option = {
        title: {
          text: "班级平均午睡时长",
          left: "left",
        },
        dataZoom: {
          bottom: 0,
          show: 8 / this.siestaList.length < 1,
          type: "slider",
          zoomLock: true,
          brushSelect: false,
          height: 8,
          handleSize: "0",
          sow: true,
          xAxisIndex: [0],
          start: 0,
          end: (8 / this.siestaList.length) * 100,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          top: 0,
          right: "4%",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            axisLabel: {
              //x轴文字的配置
              show: true,
              rotate: 30,
              interval: 0, //使x轴文字显示全
            },
            data: this.siestaList.map((item) => item.name),
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        color: ["#2f89cf", "#27d08a"],
        series: [
          {
            name: "今天",
            type: "bar",
            emphasis: {
              focus: "series",
            },
            barWidth: "45%",
            label: {
              show: true,
              position: "inside",
              fontSize: 15,
            },
            data: this.siestaList.map((item) => item.value),
          },
          {
            name: "昨天",
            type: "line",
            emphasis: {
              focus: "series",
            },
            barWidth: "45%",
            label: {
              show: true,
              position: "inside",
              fontSize: 15,
            },
            data: this.siestaList.map((item) => item.last),
          },
        ],
      };
      this.myCharts3.off("click");
      this.myCharts3.on("click", (e) => {
        console.log(e, "------e");
        if (e.name.includes("班")) {
          let obj = {
            sleepDate: this.dateTtime,
            schoolCode:this.paramsObj.schoolCode
          };
          this.siestaList.forEach((item) => {
            if (item.name == e.name) {
              obj.classId = item.classId;
            }
          });
          this.sleepSeeThree(obj);
        }else{
          const arr = []
          this.siestaList.forEach(item=>{
            if(item.name == e.name){
              arr.push(item)
            }
          })
          this.studentsInfo = arr
          this.childOpen = true
        }
      });
      // 使用刚指定的配置项和数据显示图表
      this.myCharts3.setOption(option, true);
      window.addEventListener("resize", this.monitorResize);
    },
    // 获取学校午睡
    async schoolSleep() {
      const { data, code, msg } = await schoolSleep();
      if (code == 200) {
        if (data.length != 0) {
          this.schoolSleepObj = data.map((item) => {
            return {
              schoolName: item.schoolName,
              schoolCode: item.schoolCode,
              total: item.total,
            };
          });
        } else {
          this.schoolSleepObj = [
            {
              schoolName: "",
              schoolCode: "",
              total: 0,
            },
          ];
        }
        this.myChartsFn1();
      } else {
        this.$message.error(msg);
      }
    },
    // 睡眠评分人数分布  饼图
    async schoolSleepScore(val) {
      const { data, code, msg } = await schoolSleepScore(val);
      if (code == 200) {
        this.scoreList = [
          { name: "0星", value: data.sleep0 },
          { name: "1星", value: data.sleep1 },
          { name: "2星", value: data.sleep2 },
          { name: "3星", value: data.sleep3 },
          { name: "4星", value: data.sleep4 },
          { name: "5星", value: data.sleep5 },
        ];
        this.myChartsFn2();
      } else {
        this.$message.error(msg);
      }
    },
    // 班级平均午睡时长
    async classAvg(val) {
      const { data, code, msg } = await classAvg(val);
      if (code == 200) {
        let currentDate = []; // 当前日期
        let newDate = []; // 前一天日期
        const a = new Date(this.dateTtime);
        const time = a.getTime() - 86400000 * 1;
        const dateDay = formatDateOnly(time);
        data.forEach((item) => {
          if (item.sleepDate == this.dateTtime) {
            currentDate.push(item);
          } else if (item.sleepDate == dateDay) {
            newDate.push(item);
          }
        });
        const list = [];
        currentDate.forEach((item) => {
          newDate.forEach((it) => {
            if (item.className == it.className) {
              const obj = {
                name: item.className,
                value: item.avgTime,
                last: it.avgTime,
                classId: item.classId,
              };
              list.push(obj);
            }
          });
        });
        this.siestaList = list;
        this.myChartsFn3();
      } else {
        this.$message.error(msg);
      }
    },
    //获取班级学生的午睡时长
    async sleepSeeThree(val) {
      const { rows, code, msg } = await sleepSeeThree(val);
      if(code == 200){
        this.siestaList = rows.map(item=>{
          return {
                name: item.name,
                value: item.sleepTimeHour,
                last: '',
                stuId: item.stuId,
                sex:item.sex,
                className:item.className,
                startTime:item.startTime,
                endTime:item.endTime
          }
        })
        this.myChartsFn3()
      }else{
        this.$message.error(msg)
      }
    },

    //地图监听窗口缩放事件
    monitorResize() {
      this.myCharts1.resize();
      this.myCharts2.resize();
      this.myCharts3.resize();
    },
  },
};
</script>
<style lang="scss" scoped>
.echartBox {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  height: 840px;
  margin-top: 20px;
  margin-bottom: 50px;

  .chartdom1 {
    margin-top: 10px;
    width: 90%;
    height: 50%;
  }

  .chartdom2 {
    margin-top: 50px;
    width: 45%;
    height: 50%;
  }

  .chartdom3 {
    margin-top: 50px;
    width: 45%;
    height: 50%;
  }
}
</style>
